<template>
	<div class="thePage">
		<div class="pg-titie">留言反馈</div>
		<div class="name-date">
			<div class="name">{{name}}</div>
			<div class="date">日期：{{date}}</div>
		</div>
		<div class="line"></div>
		<!-- 日志列表 -->
		<div class="list">
			<div class="item-box" v-for="(item,i) in listData" :key="i">
				<div class="title-diary van-ellipsis">{{item.title}}</div>
				<div class="main-diary">
					<div class="content-diary">{{item.content}}</div>
					<div class="comment-diary" v-if="item.comment">商家回复：{{item.comment}}</div>
				</div>
				<div class="bottom-diary">
					<div class="dtUpdate">{{item.dtUpdate}}</div>
					<div>
						<i class="iconfont icon-bianji"></i>
						<i class="iconfont icon-shanchu1"></i>
					</div>
				</div>
			</div>
			<div class="row-add">
				<div class="btn-add">+</div>
			</div>

		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: "古茗奶茶",
				date: "2024.6",
				listData: [{
						title: "hhh",
						content: "古茗奶茶，简直是味蕾的盛宴！每一口都能感受到茶香与奶香的完美融合，茶味清新淡雅，奶味浓郁醇厚，甜而不腻，让人回味无穷。珍珠 Q 弹有嚼劲，布丁滑嫩细腻，每一种配料都增添了独特的口感层次。",
						comment: "",
						dtUpdate: "2024-6-02",
					},
					{
						title: "ttt",
						content: "招牌的芝士奶茶，奶盖咸香绵密，与下面的茶底搭配得恰到好处。服务也非常周到，店内环境温馨舒适，是和朋友小聚的绝佳选择。",
						comment: "尊敬的顾客，非常感谢您对古茗奶茶的喜爱和支持！您的每一句称赞都是我们不断前进的动力。我们一直致力于为您提供最优质的奶茶和最贴心的服务，看到您能在品尝我们的奶茶时获得满满的幸福感，我们感到无比欣慰。 ",
						dtUpdate: "2024-6-08",
					},
					{
						title: "yyy",
						content: "水果奶茶里的水果新鲜多汁，与奶茶的融合堪称完美。奶茶的甜度也可以根据个人口味调整，非常贴心。工作人员态度亲切，制作速度快，让我不用长时间等待就能品尝到美味。",
						comment: "",
						dtUpdate: "2024-6-12",
					},
				],
			}
		}
	}
</script>

<style lang="less" scoped>
	.pg-titie {
		height: 60px;
		background: #FFB651;
		font-weight: bold;
		font-size: 24px;
		color: #FFFFFF;
		text-align: center;
		line-height: 60px;
	}

	.name-date {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 60px;

		.name {
			padding: 20px;
			height: 20px;
			font-weight: 500;
			font-size: 22px;
			color: #000000;
			line-height: 20px;
		}

		.date {
			height: 12px;
			font-size: 16px;
			line-height: 12px;
			color: #1B1B1B;
			padding-right: 20px;
		}
	}

	.line {
		margin: 0px 20px;
		height: 1px;
		background: #E5E5E5;
	}

	.item-box {
		margin: 20px;
		padding: 10px;
		background: #FFFFFF;
		box-shadow: 0px 0px 9px 1px rgba(255, 203, 130, 0.3);
		border-radius: 5px;

		.title-diary {
			height: 15px;
			font-weight: bold;
			font-size: 12px;
			color: #000000;
			line-height: 15px;
		}

		.main-diary {
			background: #FFFFFF;
			box-shadow: 0px 0px 9px 1px rgba(255, 203, 130, 0.3);
			border-radius: 5px;
			margin: 10px 0px;

			.content-diary {
				padding: 10px;
				font-size: 10px;
				color: #3A3A3A;
				line-height: 14px;
			}

			.comment-diary {
				padding: 0 10px 10px 10px;
				font-weight: bold;
				font-size: 10px;
				color: #000000;
			}
		}

		.bottom-diary {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.dtUpdate {
				font-size: 12px;
				font-weight: 300;
				color: #626262;
			}

			i {
				color: #FD8A23;
				font-size: 18px;
				padding-right: 10px;
			}
		}
	}

	.row-add {
		display: flex;
		justify-content: end;
		padding: 0px 10px 10px 10px;
	}

	//加号增加按钮样式(圆形 黄底白字 )
	.btn-add {
		margin: -20px 10px 0 0;
		width: 50px;
		height: 50px;
		box-shadow: 1px 1px 10px 2px rgba(255, 182, 90, 0.59);
		border-radius: 25px;
		background: #FE921E;
		color: white;
		font-size: 50px;
		text-align: center;
		line-height: 50px;
	}
</style>